<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="../img/icon/B.ico">
    <title>20_bootstrap工具提示框</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <!--<link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>-->
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!--<link href="../css/starter-template.css" rel="stylesheet">-->
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>

    <script type="text/javascript">
        // // 1. 属性选择器
        // $(function(){
        //     // $('[data-toggle="tooltip"]').tooltip();
        //      $('[data-toggle="tooltip"]').tooltip("show");
        //     // 隐藏
        //     // $('[data-toggle="tooltip"]').tooltip("hide");
        //     // 单击显示再点击隐藏，再点击显示如此循环
        //     // $('[data-toggle="tooltip"]').tooltip("toggle");
        //     //
        //     // $('[data-toggle="tooltip"]').tooltip("option");
        // });

        // // 2.
        // $(function(){
        //     // id选择器，当单击这个按钮的时候
        //    $("#showbtn").click(function(){
        //        $('[data-toggle="tooltip"]').tooltip("show");
        //    }) ;
        // });
        //
        //
        // // // 3.
        // $(function () {
        //     $("#eg").click(function () {
        //         $('[data-toggle="tooltip"]').tooltip({
        //             // 有2中使用方式：
        //             // 1. 直接在属性上设置   2. 在javascript上设置  （这里就是在javascript上面设置属性）
        //             // 单击显示,固定格式
        //            trigger:"click"
        //         });
        //     });
        // });

        // // // 属性按钮.
        // $(function(){
        //     $('[data-toggle="tooltip"]').tooltip();
        // });

        // // 事件
        $(function(){
            $('[data-toggle="tooltip"]').tooltip();

            // 当提示语显示的时候
            $('[data-toggle="tooltip"]').on('show.bs.tooltip', function () {
                // do something…
                $("#showdiv").css("background","#ffff00");
            })
        });
    </script>
</head>
<body>

<!-- container：作用相当于一个自动居中的容器(用的地方很多，不然样式可能难看) -->
<div class="container" style="margin: 100px">
    <div class="row">
        简单的按钮悬停提示
        <div>
            <button type=" button" class="btn btn-danger" title="按钮悬停提示">按钮</button>
        </div>
        <hr/>
        1. 复杂的按钮悬停提示 必须配合javascript,才能实现效果，data-toggle="tooltip" data-placement="left" 是必须的属性<br/>
        <div class="col-sm-3">
            <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="按钮悬停提示left">按钮1</button>
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="按钮悬停提示top">按钮2</button>
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="按钮悬停提示bottom">按钮3</button>
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn btn-info"data-toggle="tooltip" data-placement="right" title="按钮悬停提示right">按钮4</button>
        </div>

        <hr/>
        <hr/>
        <hr/>
        2. javascript的使用
        <hr/>

        <div class="col-lg-12">
            <button type="button" class="btn btn-info" id="showbtn">显示示例1按钮的悬停提示</button>
        </div>

        <hr/>
        <hr/>
        <hr/>
        3. 参数  详情参考bootstrap官方文档 https://v3.bootcss.com/javascript/#tooltips<br/>
        data-animation ：淡入淡出的动画<br/>
        data-html  true/false：是否支持html代为提示语(最好不要用，可能会存在xxs隐患)<br/>
        data-placement="right" ：提示语的方向<br/>
        data-selector: 触发显示提示语的事件<br/>
        data-trigger="" 如何触发显示提示语（默认hover鼠标移上显示）click hover focus manual<br/>
        data-delay {show:500,hld:100}  :延迟时间<br/>
        data-template="" 用文档默认的就行<br/>
        等等<br/>
        <hr/>
        <div class="col-sm-6">
            <button type="button" id="eg" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="提示语">按钮参数使用示例</button>
        </div>
        <div class="col-sm-6">
            <button type="button" class="btn btn-warning" data-trigger="click" data-toggle="tooltip" data-placement="right" title="提示语">属性按钮</button>
        </div>


        <hr/>
        <hr/>
        <hr/>
        4. 事件 <br/>
        当鼠标移上，改变下面div的背景颜色
        <hr/>
        <div style="margin: 50px">
            <div class="col-sm-6">
                <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="事件提示语1">事件1</button>
            </div>
            <div class="col-sm-6">
                <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="事件提示语2">事件2</button>
            </div>
        </div>
        <br/>

        <hr/>
        背景图
        <br/>
        <div id="showdiv" style="width: 100px;height: 100px;background: #ce8483" class="col-lg-12"></div>

    </div>
</div>

</div>
</div>
</body>
</html>